<!doctype html>
{% load static %}
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link href="{% static 'css/css.css' %}" rel="stylesheet" type="text/css">
    <script src="{% static 'admin/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'admin/js/jquery.min.js' %}"></script>
</head>
<body>

{% include 'header.html'%}

<div class="zhu_wrap">
    <div class="zhu_title">用户注册</div>
    <form>
        <div class="zhu_list">
            <div class="zhu_listleft">常用邮箱</div>
            <input type="text" name="user_email" class="zhu_listmiddle" autocomplete="off"/>
            <div class="zhu_listright"> 输入常用的邮箱号&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                &nbsp; &nbsp; &nbsp;
            </div>
        </div>
        <div class="zhu_list">
            <div class="zhu_listleft">设置密码</div>
            <input type="password" name="user_pass" class="zhu_listmiddle" autocomplete="off"/>
            <div class="zhu_listright">输入6-12为字母和数字的组合密码</div>
        </div>
        <div class="zhu_list">
            <div class="zhu_listleft">确认密码</div>
            <input type="password" name="user_pass1" class="zhu_listmiddle" autocomplete="off"/>
            <div class="zhu_listright">输入6-12为字母和数字的组合密码</div>
        </div>
        <div class="zhu_list">
            <div class="zhu_listleft">昵称</div>
            <input type="text" name="nick_name" class="zhu_listmiddle" autocomplete="off"/>
            <div class="zhu_listright">输入可为中文的昵称&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
        </div>
        <div class="zhu_list">
            <div class="zhu_listleft">验证码</div>
            <input type="text" name="auth_code" class="zhu_listduan" autocomplete="off"/>
            <button class="zhu_listyan yanBtn" type="button" onclick="getEmailAuthCode()">获取邮箱验证码</button>
        </div>
        <div class="zhu_list">
            <div class="zhu_listleft"></div>
            <input type="button" class="zhu_an" value="立即注册" onclick="reg()"/>
        </div>
    </form>
</div>
{% include 'footer.html'%}
</body>
<script>
    //获取验证码
    function getEmailAuthCode(){
        let user_email = $("input[name='user_email']").val();
        if(user_email!=null && user_email!==""){
            $.post(
                "auth/getCode",
                {"user_email": user_email, "code_type": "reg"},
                function (res) {
                    if (res.code === 200) {
                        //开启定时器
                        let time = 60;
                        let interval = setInterval(function (){
                            if(time>0){
                                $(".yanBtn").attr("disabled","disabled")
                                $(".yanBtn").html(time+"秒后重新获取")
                                time--;
                            }else{
                                $(".yanBtn").removeAttr("disabled")
                                $(".yanBtn").html("获取邮箱验证码")
                                window.clearInterval(interval)
                            }
                        },1000)
                        alert('发送成功，请注意查收！')
                        // window.location.href="/login.html"
                    } else {
                        alert(res.message)
                    }
                }, 'json'
            )
        }else{
            alert("请填写邮箱号！")
        }
    }

    //提交表单
    function reg(){
        let user_email = $("input[name='user_email']").val();
        let user_pass = $("input[name='user_pass']").val();
        let user_pass1 = $("input[name='user_pass1']").val();
        let nick_name = $("input[name='nick_name']").val();
        let auth_code = $("input[name='auth_code']").val();
        if(isNotNull([user_email,user_pass,user_pass1,nick_name,auth_code])){
            if(user_pass==user_pass1){
                $.post(
                    "auth/reg",
                    {
                        "user_email":user_email,
                        "user_pass":user_pass,
                        "nick_name":nick_name,
                        "auth_code":auth_code,
                    },
                    function (res){
                        if(res.code==200){
                            alert("注册成功！即将前往登录")
                            window.location.href = "login.html"
                        }else{
                            alert(res.message)
                        }
                    }
                )
            }else{
                alert("两次输入密码不一致！")
            }
        }else{
            alert("请完整填写表单！")
        }
    }

    //判断数据中值均不为空
    function isNotNull(arr){
        let flag = true
        for(let i=0;i<arr.length;i++){
            flag = arr[i]!==""
        }
        return flag
    }
</script>
</html>
